<template>
	<div id="container">
		<div id="d_container">
			<el-scrollbar height="400px">
			    <form id="RegForm">
			    	<div class="reg_div">
			    		<div class="reg">
			    			<div>登录名:&nbsp;&nbsp;</div>
			    			<div >
			    				<el-input suffix-icon="el-icon-user"  placeholder="请输入您的用户名" v-model="user.userName" clearable></el-input>
			    			</div>
			    			<div class="Msg" v-text="msg.nameMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>密码：&nbsp;&nbsp;</div>
			    			<div>
			    				<el-input  placeholder="请输入您的密码" v-model="user.userPwd" show-password></el-input>
			    			</div>
			    			<div class="Msg" v-text="msg.pwdMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>确认密码：&nbsp;&nbsp;</div>
			    			<div>
			    				<el-input  placeholder="请输入确认密码" v-model="user.userRePwd" show-password></el-input>
			    			</div>
			    			<div class="Msg" v-text="msg.rePwdMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>邮箱:&nbsp;&nbsp;</div>
			    			<div >
			    				<el-input suffix-icon="el-icon-user"  placeholder="请输入您的邮箱" v-model="user.userEmail" clearable></el-input>
			    			</div>
			    			<div class="Msg" v-text="msg.mailMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>用户真实姓名:&nbsp;&nbsp;</div>
			    			<div >
			    				<el-input suffix-icon="el-icon-user"  placeholder="请输入您的真实姓名" v-model="user.userRealName" clearable></el-input>
			    			</div>
			    			<div class="Msg" v-text="msg.realNameMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>性别:&nbsp;&nbsp;</div>
			    			<div>
			    				<el-radio-group v-model="user.userSex" style="background-color: #8FED8E;">
			    				    <el-radio label="1" border style="background-color: #AAEFA9;">男</el-radio>
			    				    <el-radio label="2" border style="background-color: #AAEFA9;">女</el-radio>
			    				</el-radio-group>
			    			</div>
			    		</div>
			    		<div class="reg">
			    			<div>
			    				选择地区：
			    			</div>
			    			<div>
			    			<el-form>
			    			<el-form-item >
			    				<el-select size="small" style="width:150px"
			    			        v-model="selectProv"
			    			        placeholder="请选择省份"
			    			        v-on:change="getProv($event)" v-on:click="user.userCity=''">
			    					<el-option
			    						v-for="item in provs"
			    						:label="item.label"
			    						:value="item.value">
			    					</el-option>
			    				</el-select>
			    				<el-select size="small" style="width: 150px"
			    			        v-if="selectProv!=''"
			    			        v-model="selectCity"
			    			        placeholder="请选择城市"
			    			        v-on:change="getCity($event)">
			    					<el-option
			    						v-for="item in citys"
			    						:label="item.label"
			    						:value="item.value">
			    					</el-option>
			    				</el-select>
			    			</el-form-item>
			    			</el-form>
			    			</div>
			    			<div class="Msg" v-text="msg.adressMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>成绩：</div>
			    			<div >
			    				<el-input suffix-icon="el-icon-user"  placeholder="请输入您的高考成绩" v-model="user.userScore" clearable></el-input>
			    			</div>
			    			<div class="Msg" v-text="msg.scoreMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>排名:&nbsp;&nbsp;</div>
			    			<div >
			    				<el-input suffix-icon="el-icon-user"  placeholder="请输入您的高考排名" v-model="user.userRank" clearable></el-input>
			    			</div>
			    			<div class="Msg" v-text="msg.rankMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>选课：</div>
			    			<div>
			    				<el-checkbox-group
			    					v-model="checkedCourses"
			    					:min="0"
			    					:max="3">
			    				<el-checkbox v-for="course in courses" :label="course" :key="course">{{course}}</el-checkbox>
			    				</el-checkbox-group>
			    			</div>
			    			<div class="Msg" v-text="msg.courseMsg"></div>
			    		</div>
			    		<div class="reg">
			    			<div>
			    				<el-button type="success" @click="reg()">注册</el-button>
			    			</div>
			    			<div class="Msg" v-text="msg.regMsg"></div>
			    		</div>
			    	</div>
			    </form>
			</el-scrollbar>

		</div>
	</div>
</template>

<script>
	import {provData,cityData} from '../../dtools/somedata.js';
	const courseOptions = ['物理', '化学', '生物', '政治','地理','历史'];
	export default{
		name:'Reg',
		data(){
			return{
				checkedCourses: ['物理', '生物','化学'],
				courses: courseOptions,
				provs:provData,
				  citys: [],
				  selectProv: '',
				  selectCity: '',
				user:{
					userName:'',
					userPwd:'',
					userRePwd:'',
					userEmail:'',
					userRealName:'',
					userSex:'1',
					userProvince:'',
					userCity:'',
					userScore:'',
					userRank:'',
					course1:'',
					course2:'',
					course3:''
				},
				msg:{
					courseMsg:'',
					rankMsg:'',
					scoreMsg:'',
					realNameMsg:'',
					mailMsg:'',
					rePwdMsg:'',
					pwdMsg:'',
					nameMsg:'',
					adressMsg:'',
					regMsg:''
				}
			}
		},

		methods: {
			getProv: function (prov) {

			   let tempCity=[];

			   this.citys=[];

			   this.selectCity='';

			   let allCity= cityData;
			   for (var val of allCity){
			   	if (prov == val.prov){
			   		tempCity.push({label: val.label, value: val.label})
			       }

			   }
			   this.citys = tempCity;
			},
			getCity: function (city) {
				this.user.userProvince = this.selectProv;
				this.user.userCity = this.selectCity;
				console.log(this.user);
			},
			reg(){
				this.msg.courseMsg='';
				this.msg.rankMsg='';
				this.msg.scoreMsg='';
				this.msg.realNameMsg='';
				this.msg.mailMsg='';
				this.msg.rePwdMsg='';
				this.msg.pwdMsg='';
				this.msg.nameMsg='';
				this.msg.adressMsg ='';
				this.msg.regMsg='';
				if(this.checkedCourses.length!=3){
					this.msg.courseMsg = "选课数必须是3门";
				}
				else if(this.check(this.user.userName)==false){
					this.msg.nameMsg = "包含特殊字符或者敏感语句";
				}
				else if(this.check(this.user.userPwd)==false){
					this.msg.pwdMsg="包含特殊字符或者敏感语句";
				}
				else if(this.user.userRePwd!=this.user.userPwd){
					this.msg.rePwdMsg = "两次密码输入不一样";
				}
				else if(this.check(this.user.userEmail)==false){
					this.msg.mailMsg = "包含特殊字符或者敏感语句";
				}
				else if(this.check(this.user.userRealName)==false){
					this.msg.realNameMsg = "包含特殊字符或者敏感语句";
				}
				else if(this.check(this.user.userScore)==false){
					this.msg.scoreMsg = "包含特殊字符或者敏感语句";
				}
				else if(this.check(this.user.userRank)==false)
				{
					this.msg.rankMsg = "包含特殊字符或者敏感语句";
				}
				else{
					if(this.user.userName==''){
						this.msg.nameMsg = "您的用户名不能为空";
					}
					else if(this.user.userPwd==''){
						this.msg.pwdMsg = "您的密码不能为空"
					}
					else if(this.user.userEmail==''){
						this.msg.mailMsg='您的邮箱不可以为空';
					}
					else if(this.user.userRealName==''){
						this.msg.realNameMsg = '您的真实姓名不能为空';
					}
					else if(this.user.userProvince=='')
					{
						this.msg.adressMsg = "省份和城市不可以不选";
					}
					else if(this.user.userCity=='')
					{
						this.msg.adressMsg = "城市不可以不选";
					}
					else if(this.user.userScore==''||isNaN(this.user.userScore)==true){
						this.msg.scoreMsg = "分数只能为数字且不能为空";
					}
					else if(this.user.userRank==''||isNaN(this.user.userRank)==true){
						this.msg.rankMsg = "排名只能为数字且不能为空";
					}
					else{

						this.user.userPwd = this.$md5("wearethe" + this.user.userPwd + "temfromupc")
						this.user.course1 = this.checkedCourses[0];
						this.user.course2 = this.checkedCourses[1];
						this.user.course3 = this.checkedCourses[2];
						console.log(this.user);
						var param = this.$qs.stringify(this.user);
						this.$axios
						.post("http://49.232.135.8:8088/back/userinfo/reg",param)
						.then(rst=>{
							if(rst.data=='-1'){
								this.msg.nameMsg = "用户名重复";
							}else if(rst.data=='-2'){
								this.msg.mailMsg = "邮箱名重复";
							}else if(rst.data=='0'){
								this.msg.regMsg = "注册失败";
							}
							else{

								this.$emit('showLogin');

							}
						}).catch(ex=>{
							console.log(ex);
						});
					}
				}
			},
			check(str){
				if(str.indexOf("=")!=-1) return false;
				if(str.indexOf("\'")!=-1) return false;
				if(str.indexOf("\"")!=-1) return false;
				if(str.indexOf(" ")!=-1) return false;
				if(str.indexOf(";")!=-1) return false;
				if(str.indexOf(" or ")!=-1||str.indexOf(" Or ")!=-1||str.indexOf(" oR ")!=-1||str.indexOf(" OR ")!=-1) return false;
				if(str.indexOf("|")!=-1) return false;
				if(str.indexOf("(")!=-1) return false;
				if(str.indexOf(")")!=-1) return false;
				if(str.indexOf("%")!=-1) return false;
				if(str.indexOf("\\")!=-1) return false;
				if(str.indexOf(" true")!=-1) return false;
				return true;
			}

		},


	}
</script>

<style scoped>
	#d_container{
		border-radius: 5px;
		background-color: #b3edb5;
		border-bottom: 5px solid white;
		padding: 10px;
	}
	.reg{
		padding-left: 20px;
		margin-left: 40px;
		margin-bottom: 20px;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
	}
	.Msg{
		vertical-align: red;
		color: red;
		font-family: 楷体;
		font-size: 30px;
	}
</style>
